﻿<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
    <div class="example-content">
        <BitMenuButton Text="MenuButton" Items="basicItems" />
    </div>
</DemoExample>

<DemoExample Title="Split" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
    <div>Explore the Split behavior of BitMenuButton, demonstrating buttons divided into two sections. One section triggers an action on click, while the other section opens a callout to reveal additional options.</div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Split" Items="basicItems" Split />
    </div>
</DemoExample>

<DemoExample Title="Variant" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
    <div>The MenuButton offers three variants: Fill (default), Outline, and Text.</div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Fill" Items="basicItems" Variant="BitVariant.Fill" />
        <BitMenuButton Text="Outline" Items="basicItems" Variant="BitVariant.Outline" />
        <BitMenuButton Text="Text" Items="basicItems" Variant="BitVariant.Text" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Fill" Items="basicItems" Variant="BitVariant.Fill" IsEnabled="false" />
        <BitMenuButton Text="Outline" Items="basicItems" Variant="BitVariant.Outline" IsEnabled="false" />
        <BitMenuButton Text="Text" Items="basicItems" Variant="BitVariant.Text" IsEnabled="false" />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="Fill" Items="basicItems" Variant="BitVariant.Fill" Split />
        <BitMenuButton Text="Outline" Items="basicItems" Variant="BitVariant.Outline" Split />
        <BitMenuButton Text="Text" Items="basicItems" Variant="BitVariant.Text" Split />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Fill" Items="basicItems" Variant="BitVariant.Fill" IsEnabled="false" Split />
        <BitMenuButton Text="Outline" Items="basicItems" Variant="BitVariant.Outline" IsEnabled="false" Split />
        <BitMenuButton Text="Text" Items="basicItems" Variant="BitVariant.Text" IsEnabled="false" Split />
    </div>
</DemoExample>

<DemoExample Title="Color" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Primary" />
        <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Primary" />
        <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Primary" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Primary" Split />
        <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Primary" Split />
        <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Primary" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Secondary" />
        <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Secondary" />
        <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Secondary" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Secondary" Split />
        <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Secondary" Split />
        <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Secondary" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Tertiary" />
        <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Tertiary" />
        <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Tertiary" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Tertiary" Split />
        <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Tertiary" Split />
        <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Tertiary" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Info" />
        <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Info" />
        <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Info" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Info" Split />
        <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Info" Split />
        <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Info" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Success" />
        <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Success" />
        <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Success" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Success" Split />
        <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Success" Split />
        <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Success" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Warning" />
        <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Warning" />
        <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Warning" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Warning" Split />
        <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Warning" Split />
        <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Warning" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" />
        <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" />
        <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SevereWarning" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" Split />
        <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" Split />
        <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SevereWarning" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Error" />
        <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Error" />
        <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Error" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Error" Split />
        <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Error" Split />
        <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Error" Split />
    </div>
    <br /><br />
    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
        <div class="example-content">
            <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" />
            <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" />
            <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" />
        </div>
        <br />
        <div class="example-content">
            <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" Split />
            <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" Split />
            <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" Split />
        </div>
        <br /><br />
        <div class="example-content">
            <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" />
            <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" />
            <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" />
        </div>
        <br />
        <div class="example-content">
            <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" Split />
            <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" Split />
            <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" Split />
        </div>
        <br /><br />
        <div class="example-content">
            <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" />
            <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" />
            <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" />
        </div>
        <br />
        <div class="example-content">
            <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" Split />
            <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" Split />
            <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" Split />
        </div>
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" />
        <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" />
        <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" Split />
        <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" Split />
        <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" />
        <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" />
        <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" Split />
        <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" Split />
        <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" />
        <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" />
        <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" Split />
        <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" Split />
        <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" />
        <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" />
        <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" Split />
        <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" Split />
        <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" />
        <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" />
        <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" Split />
        <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" Split />
        <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" Split />
    </div>
    <br /><br />
    <div class="example-content">
        <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" />
        <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" />
        <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" Split />
        <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" Split />
        <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" Split />
    </div>
</DemoExample>

<DemoExample Title="Size" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
    <div>Varying sizes for menu buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Small" Items="basicItems" Variant="BitVariant.Fill" Size="BitSize.Small" />
        <BitMenuButton Text="Small" Items="basicItems" Variant="BitVariant.Outline" Size="BitSize.Small" />
        <BitMenuButton Text="Small" Items="basicItems" Variant="BitVariant.Text" Size="BitSize.Small" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Medium" Items="basicItems" Variant="BitVariant.Fill" Size="BitSize.Medium" />
        <BitMenuButton Text="Medium" Items="basicItems" Variant="BitVariant.Outline" Size="BitSize.Medium" />
        <BitMenuButton Text="Medium" Items="basicItems" Variant="BitVariant.Text" Size="BitSize.Medium" />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Large" Items="basicItems" Variant="BitVariant.Fill" Size="BitSize.Large" />
        <BitMenuButton Text="Large" Items="basicItems" Variant="BitVariant.Outline" Size="BitSize.Large" />
        <BitMenuButton Text="Large" Items="basicItems" Variant="BitVariant.Text" Size="BitSize.Large" />
    </div>
</DemoExample>

<DemoExample Title="Sticky" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
    <div>Experience the Sticky functionality of BitMenuButton, showcasing a button that remains sticky after an item selection. The button displays the selected item and retains its state for continuous user interaction.</div>
    <br />
    <div class="example-content">
        <BitMenuButton Items="basicItems" Variant="BitVariant.Fill" Sticky />
        <BitMenuButton Items="basicItems" Variant="BitVariant.Fill" Split Sticky />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Items="basicItems" Variant="BitVariant.Outline" Sticky />
        <BitMenuButton Items="basicItems" Variant="BitVariant.Outline" Split Sticky />
    </div>
    <br />
    <div class="example-content">
        <BitMenuButton Items="basicItems" Variant="BitVariant.Text" Sticky />
        <BitMenuButton Items="basicItems" Variant="BitVariant.Text" Split Sticky />
    </div>
</DemoExample>

<DemoExample Title="Icons" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
    <div>Present BitMenuButton instances with customized icons, enriching the visual options for representing menu buttons.</div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="IconName" Items="basicItemsIcon" IconName="@BitIconName.Edit" />
        <BitMenuButton Text="ChevronDownIcon" Items="basicItemsIcon" ChevronDownIcon="@BitIconName.DoubleChevronDown" Split />
    </div>
</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
    <br />
    <div>Component's Style & Class:</div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Styled Button" Items="basicItems" Style="border-radius: 1rem; margin: 1rem; box-shadow: aqua 0 0 1rem; overflow: hidden;" />
        <BitMenuButton Text="Classed Button" Items="basicItems" Class="custom-class" Variant="BitVariant.Outline" />
    </div>
    <br /><br /><br /><br />
    <div>Item's Style & Class:</div>
    <br />
    <div class="example-content">
        <BitMenuButton Text="Item Styled & Classed Button" Items="itemStyleClassItems" Variant="BitVariant.Text" />
    </div>
    <br /><br /><br /><br />
    <div><b>Styles</b> & <b>Classes</b>:</div>
    <br />
    <div>
        <BitMenuButton Text="Classes" Items="basicItems" IconName="@BitIconName.FormatPainter" Variant="BitVariant.Text"
                       Classes="@(new() { OperatorButton = "custom-button",
                                              Opened = "custom-opened",
                                              Callout = "custom-callout",
                                              ItemButton = "custom-item-button" })" />
        <br />
        <BitMenuButton Text="Styles" Items="basicItems" IconName="@BitIconName.Brush"
                       Styles="@(new() { Root = "--button-background: tomato; background: var(--button-background); border-color: var(--button-background); border-radius: 0.25rem;",
                                             Opened = "--button-background: orangered;",
                                             OperatorButton = "background: var(--button-background);",
                                             ItemButton = "background: lightcoral;",
                                             Callout = "border-radius: 0.25rem; box-shadow: lightgray 0 0 0.5rem;" })" />
    </div>
</DemoExample>

<DemoExample Title="Templates" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
    <div>Explore BitMenuButton's customization capabilities.</div>
    <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
    <br />
    <div>HeaderTemplate</div>
    <BitMenuButton Items="basicItems">
        <HeaderTemplate>
            <div style="font-weight: bold; color: #d13438;">
                Custom Header!
            </div>
        </HeaderTemplate>
    </BitMenuButton>
    <br /><br />
    <div>ItemTemplate</div>
    <BitMenuButton Text="Items" Items="itemTemplateItems" Split>
        <ItemTemplate Context="item">
            <div class="item-template-box">
                <span style="color:brown">@item.Text (@item.Key)</span>
            </div>
        </ItemTemplate>
    </BitMenuButton>
    <br /><br />
    <div>Item's template</div>
    <BitMenuButton Text="Items" Items="itemTemplateItems2" />
</DemoExample>

<DemoExample Title="Events" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
    <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
    <br />
    <div>Non-Sticky</div>
    <div class="example-content">
        <BitMenuButton Text="Items" Items="basicItems"
                       OnChange="(BitMenuButtonItem item) => eventsChangedItem = item?.Key"
                       OnClick="(BitMenuButtonItem item) => eventsClickedItem = item?.Key" />

        <BitMenuButton Split Text="Items" Items="basicItemsOnClick"
                       OnChange="(BitMenuButtonItem item) => eventsChangedItem = item?.Key"
                       OnClick="@((BitMenuButtonItem item) => eventsClickedItem = "Main button clicked")" />
    </div>
    <br /><br />
    <div>Sticky</div>
    <div class="example-content">
        <BitMenuButton Sticky Items="basicItems"
                       OnChange="(BitMenuButtonItem item) => eventsChangedItem = item?.Key"
                       OnClick="(BitMenuButtonItem item) => eventsClickedItem = item?.Key" />

        <BitMenuButton Sticky Split Items="basicItemsOnClick"
                       OnChange="(BitMenuButtonItem item) => eventsChangedItem = item?.Key"
                       OnClick="(BitMenuButtonItem item) => eventsClickedItem = item?.Key" />
    </div>
    <br /><br />
    <div>Changed item: @eventsChangedItem</div>
    <div>Clicked item: @eventsClickedItem</div>
</DemoExample>

<DemoExample Title="Binding" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
    <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
    <br /><br /><br /><br />
    <div>
        <div>DefaultSelectedItem:</div>
        <br />
        <BitMenuButton Split Sticky Items="basicItems" DefaultSelectedItem="basicItems[1]" />
    </div>
    <br /><br /><br /><br />
    <div>
        <div>Two-way SelectedItem:</div>
        <br />
        <BitMenuButton Sticky Items="basicItems" @bind-SelectedItem="twoWaySelectedItem" />
        <BitChoiceGroup Horizontal Items="@choiceGroupItems" @bind-Value="@twoWaySelectedItem" />
    </div>
    <br /><br /><br /><br />
    <div>
        <div>Item's IsSelected:</div>
        <br />
        <BitMenuButton Sticky Items="isSelectedItems" />
    </div>
    <br /><br /><br /><br />
    <div>One-way IsOpen (closes after 2 seconds):</div>
    <br />
    <div class="example-content">
        <BitMenuButton Sticky Items="basicItems" IsOpen="oneWayIsOpen" />
        <BitCheckbox Label="One-way IsOpen" @bind-Value="oneWayIsOpen" OnChange="async _ => { await Task.Delay(2000); oneWayIsOpen = false; }" />
    </div>
    <br /><br /><br /><br />
    <div>Two-way IsOpen:</div>
    <br />
    <div class="example-content">
        <BitMenuButton Sticky Items="basicItems" @bind-IsOpen="twoWayIsOpen" />
        <BitCheckbox Label="Two-way IsOpen" @bind-Value="twoWayIsOpen" />
    </div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
    <div>Use BitMenuButton in right-to-left (RTL).</div>
    <br />
    <div class="example-content" dir="rtl">
        <BitMenuButton Text="گزینه ها" Dir="BitDir.Rtl" Items="rtlItemsIcon" IconName="@BitIconName.Edit" />
        <BitMenuButton Text="گزینه ها" Dir="BitDir.Rtl" Items="rtlItemsIcon" ChevronDownIcon="@BitIconName.DoubleChevronDown" Split />
    </div>
</DemoExample>

@code {
    private List<BitMenuButtonItem> itemTemplateItems2 =
        [
        new()
        {
            Text = "Add", Key = "add-key", IconName = BitIconName.Add,
            Template = (item => @<div class="item-template-box" style="color:green">@item.Text (@item.Key)</div>)
        },
    new ()
        {
            Text = "Edit", Key = "edit-key", IconName = BitIconName.Edit,
            Template = (item => @<div class="item-template-box" style="color:yellow">@item.Text (@item.Key)</div>)
        },
    new()
        {
            Text = "Delete", Key = "delete-key", IconName = BitIconName.Delete,
            Template = (item => @<div class="item-template-box" style="color:red">@item.Text (@item.Key)</div>)
        }
    ];
}